<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心电图效果</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>
    <style>
        #main {
            width: 100%;
            height: 400px;
        }
    </style>
</head>
<body>
    <h2>心电图效果演示</h2>
    <div id="main"></div>

    <script>
        // 初始化ECharts实例
        var chart = echarts.init(document.getElementById('main'));

        // 初始化心电图数据（预填充）
        var data = [];
        var dataLength = 100; // 心电图显示的数据长度
        for (var i = 0; i < dataLength; i++) {
            data.push(0);  // 初始填充0值
        }

        // X轴时间的初始值
        var base = +new Date();

        // 时间和心电图数据生成
        function addData(shift) {
            base += 100; // 每100ms为一个单位
            data.push(Math.random() * 2 - 1);  // 模拟随机心电波形数据
            if (shift) {
                data.shift();  // 移除最早的数据点，使曲线滚动
            }
        }

        // 初始的ECharts配置
        var option = {
            title: {
                text: '动态心电图'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: (function () {
                    var res = [];
                    var len = dataLength;
                    while (len--) {
                        res.push(new Date(base - (dataLength - len) * 100).toLocaleTimeString().replace(/^\D*/, ''));
                    }
                    return res;
                })()
            },
            yAxis: {
                type: 'value',
                min: -2,
                max: 2,
                axisLabel: {
                    formatter: function (val) {
                        return val.toFixed(1);
                    }
                }
            },
            series: [
                {
                    name: '心电波形',
                    type: 'line',
                    data: data,
                    smooth: true,  // 平滑曲线
                    lineStyle: {
                        color: '#00FF00',
                        width: 2
                    },
                    showSymbol: false  // 隐藏点的标记
                }
            ]
        };

        chart.setOption(option);

        // 动态更新心电图数据的函数
        setInterval(function () {
            addData(true);

            chart.setOption({
                xAxis: {
                    data: (function () {
                        var res = [];
                        var len = dataLength;
                        while (len--) {
                            res.push(new Date(base - (dataLength - len) * 100).toLocaleTimeString().replace(/^\D*/, ''));
                        }
                        return res;
                    })()
                },
                series: [
                    {
                        data: data
                    }
                ]
            });
        }, 100);  // 每100ms更新一次
    </script>
</body>
</html>
